<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品页</title>

    <link rel="stylesheet" href="./dist/css/reset.css">
    <link rel="stylesheet" href="./dist/css/spy.css">
    <link rel="stylesheet" href="./dist/font/iconfont.css">
    <script src="./libs/jquery.js"></script>


</head>

<body>
    <div class="headd">
        <div class="banzhong">
            <div class="headdl">
                <a href="" class="iconfont sj"
                    style="width: 108px;height: 29.6px;font-size: 12px;margin-top: 2px; ">&#xe694;手机版</a>
                <i>丨</i>
                <a href="" class="sj" style="width: 108px;height: 29.6px;font-size: 12px;">Q币充值</a>
            </div>
            <div class="headdr">
                <div class="opop">
                    <div href="" class="headdr1" id="headdr1"
                        style="width: 108px;height: 29.6px;font-size: 12px; line-height: 29.6px;display: block;">
                        <span>你还未登录请</span> <a href="denglu.html" class="qudl" style="color: #666;">登录</a> </div>
                    <div href="" class="headdr1" id="headdr2"
                        style="width: 108px;height: 29.6px;font-size: 12px; line-height: 29.6px;display: none;"><span
                            style="float: left; display: block;height: 29px; width: 70px;white-space:nowrap;overflow: hidden;text-overflow : ellipsis;">欢迎1768232483</span><em
                            class="tcgn" style="color: #666;float: left;margin-left: 10px;">退出</em> </div>
                    <i>丨</i>
                    <a href="" class="sj" style="width: 108px;height: 29.6px;font-size: 12px;">我的订单</a>
                    <i>丨</i>
                    <a href="" class="iconfont sj" style="width: 108px;height: 29.6px;font-size: 12px;">个人中心</a>
                    <i>丨</i>
                    <a href="" class="sj" style="width: 108px;height: 29.6px;font-size: 12px;">帮助中心</a>
                    <i>丨</i>
                    <a href="" class="sj" style="width: 108px;height: 29.6px;font-size: 12px;">游戏导航</a>
                </div>

            </div>
        </div>
    </div>


    <div class="head">
        <div class="headbz">
            <img src="../dist/images/images/newdjc_03.png" alt="" class="hbzl">
            <div class="sskb">
                <input type="text" value="输入道具进行搜索" attr_default="输入道具进行搜索" class="ssk">
                <a href="">
                    <div class="an" style="width: 49px;height: 51px;"></div>
                </a>
            </div>
            <img src="../dist/images/images/yxlm_06.png" alt="" class="hbzr">

        </div>

    </div>

    <div class="lib">
        <div class="zzz">
            <ul>
                <a href="daojucheng.html" target="blank">
                    <li>首页</li>
                </a>
                <li>商品列表</li>
                <li>活动专区</li>
                <li>限时折扣</li>
                <li>聚豆乐园</li>
                <li>周边商城</li>
                <li>个人中心</li>
            </ul>
            <a href="gouwuche.html">
                <div class="gwc iconfont" style="line-height: 78px; font-size: 18px;"> <span
                        style="font-size: 25px;">&#xeab2;</span> 购物车 （0）</div>
            </a>
        </div>
    </div>




    <div class="ulxb">

        <ul class="ulxbbz">
            <li>全部分类</li>
            <li>英雄</li>
            <li>表情</li>
            <li>海克斯及其他</li>
            <li>云顶之弈</li>
            <li>皮肤</li>
            <li>道具</li>
            <li>守卫眼皮肤</li>
            <li>道具包</li>
        </ul>


    </div>
    <div class="url">您现在的位置：<a href="">英雄联盟</a> > <a href="">全部分类</a> </div>
    <div class="st">
        <div class="stl">
            <div class="stl1">
                <h3>热门排行</h3>
                <span></span>
            </div>
            <ul>
                <li>
                    <a href="" class="lla">
                        <img src="../dist/images1/lg1.jpg" alt="">
                        <div class="imgr">
                            <p class="p1">宇航员 拉莫斯</p>
                            <p class="p2">Q币价：20.00</p>
                            <p class="p3">微信价：<span style="font-weight: 900;">19.40 Q币</span> </p>
                        </div>

                    </a>
                </li>
                <li> <a href="" class="lla">
                        <img src="../dist/images1/lg1.jpg" alt="">
                        <div class="imgr">
                            <p class="p1">宇航员 拉莫斯</p>
                            <p class="p2">Q币价：20.00</p>
                            <p class="p3">微信价：<span style="font-weight: 900;">19.40 Q币</span> </p>
                        </div>

                    </a> </li>
                <li> <a href="" class="lla">
                        <img src="../dist/images1/lg1.jpg" alt="">
                        <div class="imgr">
                            <p class="p1">宇航员 拉莫斯</p>
                            <p class="p2">Q币价：20.00</p>
                            <p class="p3">微信价：<span style="font-weight: 900;">19.40 Q币</span> </p>
                        </div>

                    </a> </li>
                <li> <a href="" class="lla">
                        <img src="../dist/images1/lg1.jpg" alt="">
                        <div class="imgr">
                            <p class="p1">宇航员 拉莫斯</p>
                            <p class="p2">Q币价：20.00</p>
                            <p class="p3">微信价：<span style="font-weight: 900;">19.40 Q币</span> </p>
                        </div>

                    </a> </li>
                <li> <a href="" class="lla">
                        <img src="../dist/images1/lg1.jpg" alt="">
                        <div class="imgr">
                            <p class="p1">宇航员 拉莫斯</p>
                            <p class="p2">Q币价：20.00</p>
                            <p class="p3">微信价：<span style="font-weight: 900;">19.40 Q币</span> </p>
                        </div>

                    </a> </li>
                <li> <a href="" class="lla">
                        <img src="../dist/images1/lg1.jpg" alt="">
                        <div class="imgr">
                            <p class="p1">宇航员 拉莫斯</p>
                            <p class="p2">Q币价：20.00</p>
                            <p class="p3">微信价：<span style="font-weight: 900;">19.40 Q币</span> </p>
                        </div>

                    </a> </li>
                <li> <a href="" class="lla">
                        <img src="../dist/images1/lg1.jpg" alt="">
                        <div class="imgr">
                            <p class="p1">宇航员 拉莫斯</p>
                            <p class="p2">Q币价：20.00</p>
                            <p class="p3">微信价：<span style="font-weight: 900;">19.40 Q币</span> </p>
                        </div>

                    </a> </li>
                <li> <a href="" class="lla">
                        <img src="../dist/images1/lg1.jpg" alt="">
                        <div class="imgr">
                            <p class="p1">宇航员 拉莫斯</p>
                            <p class="p2">Q币价：20.00</p>
                            <p class="p3">微信价：<span style="font-weight: 900;">19.40 Q币</span> </p>
                        </div>

                    </a> </li>
                <li> <a href="" class="lla">
                        <img src="../dist/images1/lg1.jpg" alt="">
                        <div class="imgr">
                            <p class="p1">宇航员 拉莫斯</p>
                            <p class="p2">Q币价：20.00</p>
                            <p class="p3">微信价：<span style="font-weight: 900;">19.40 Q币</span> </p>
                        </div>

                    </a> </li>
                <li> <a href="" class="lla">
                        <img src="../dist/images1/lg1.jpg" alt="">
                        <div class="imgr">
                            <p class="p1">宇航员 拉莫斯</p>
                            <p class="p2">Q币价：20.00</p>
                            <p class="p3">微信价：<span style="font-weight: 900;">19.40 Q币</span> </p>
                        </div>

                    </a> </li>


            </ul>
        </div>


        <!-- ******************* -->

        <!-- ***************** -->
        <div class="stl">
            <div class="stl1">
                <h3>周边商城</h3>
                <span></span>
            </div>
            <ul>
                <li>
                    <a href="" class="lla" style="overflow: hidden;">
                        <img src="../dist/images1/zb1.jpg" alt=""
                            style="width: 192px;height: 184px;display: block;overflow: hidden;">
                        <p class="p1" style="margin-top: 10px;width: 150px;">宇航员 拉莫斯</p>
                        <p class="p2"
                            style="margin-top: 8px;margin-bottom: 30ox;height: 40px;font-weight: 900;color: red;">
                            Q币价：20.00</p>


                    </a>
                </li>
                <li> <a href="" class="lla" style="overflow: hidden;">
                        <img src="../dist/images1/zb2.jpg" alt=""
                            style="width: 192px;height: 184px;display: block;overflow: hidden;">
                        <p class="p1" style="margin-top: 10px;width: 150px;">宇航员 拉莫斯</p>
                        <p class="p2"
                            style="margin-top: 8px;margin-bottom: 30ox;height: 40px;font-weight: 900;color: red;">
                            Q币价：20.00</p>


                    </a> </li>
                <li> <a href="" class="lla" style="overflow: hidden;">
                        <img src="../dist/images1/zb3.jpg" alt=""
                            style="width: 192px;height: 184px;display: block;overflow: hidden;">
                        <p class="p1" style="margin-top: 10px;width: 150px;">宇航员 拉莫斯</p>
                        <p class="p2" style="margin-top: 8px;margin-bottom: 30ox;font-weight: 900;color: red;">Q币价：20.00
                        </p>

                        <p style="height: 30px;position: relative;"><span
                                style="display: block;float: right;font-size: 12px;position: absolute;bottom: 0;right: 0;">更多></span>
                        </p>
                    </a> </li>
            </ul>
        </div>
        <!-- ****************** -->




        <div class="str">
            <div class="strt">
                <div class="strtt">
                    <div class="gjz">关键字:
                        <input type="text">
                    </div>
                    <div class="jgqj">
                        价格区间（Q币）:
                        <input type="text"> -
                        <input type="text">
                    </div>

                    <div class="qdan">确定</div>
                </div>

                <div class="strtb">
                    <span style="display: block;float: left;">上架时间</span>
                    <span style=" margin-left: 28px;display: block;float: left;">销量</span>
                    <span style="margin-left: 28px;display: block;float: left;">价格</span>
                    <span style="margin-left: 56px;display: block;float: left;">显示未拥有</span>
                    <span style="margin-left: 5px;display: block;float: left;">显示已拥有</span>

                </div>
            </div>

            <div class="xqq">
                <!-- <div>
                      <img src="../dist/images/maokai.jpg" alt="">
                      <span class="name">宇航员 茂凯</span>
                      <span class="qbj">q币价: &nbsp;&nbsp;<i>79Q币</i> </span>
                      <span class="wxj">微信价:&nbsp;&nbsp; <i>76.63Q币</i></span>
                      <span class="jrgwc">加入购物车</span>
                  </div> -->
            </div>


        </div>

    </div>





    <div style="height: 331px;background-color: #3b3f4a; margin-top: 40px;padding-top: 25px;">
        <div style="width: 1250px;height: 150px;margin: 0 auto;margin-top: 25px;">
            <div style="width: 227px;height: 150px;border-right: 1px solid #444853;float: left;">
                <h5 style="width: 227px;margin-left: 55px;font-size: 15px;height: 30px;color: #acb1bb;"> <span
                        class="iconfont" style=" width: 227px; font-size: 20px;text-align: center;">&#xe6c5;</span> 我是新手
                </h5>
                <h4 style="width: 227px;height: 25px;font-size: 12px;margin-left: 80px;color: #acb1bb;">什么是道聚城</h4>
                <h4 style="width: 227px;height: 25px;font-size: 12px;margin-left: 80px;color: #acb1bb;">如何购买</h4>
                <h4 style="width: 227px;height: 25px;font-size: 12px;margin-left: 80px;color: #acb1bb;">如何赠送</h4>
                <h4 style="width: 227px;height: 25px;font-size: 12px;margin-left: 80px;color: #acb1bb;">如何获取聚豆</h4>
            </div>
            <div style="width: 227px;height: 150px;border-right: 1px solid #444853;float: left;">
                <h5 style="width: 227px;margin-left: 55px;font-size: 15px;height: 30px;color: #acb1bb;"> <span
                        class="iconfont" style=" width: 227px; font-size: 20px;text-align: center;">&#xe6c5;</span> 个人中心
                </h5>
                <h4 style="width: 227px;height: 25px;font-size: 12px;margin-left: 80px;color: #acb1bb;">发货时间</h4>
                <h4 style="width: 227px;height: 25px;font-size: 12px;margin-left: 80px;color: #acb1bb;">如何领取</h4>
                <h4 style="width: 227px;height: 25px;font-size: 12px;margin-left: 80px;color: #acb1bb;">补发规则</h4>
                <h4 style="width: 227px;height: 25px;font-size: 12px;margin-left: 80px;color: #acb1bb;">vip定价</h4>
                <h4 style="width: 227px;height: 25px;font-size: 12px;margin-left: 80px;color: #acb1bb;">道具状态定义</h4>
            </div>
            <div style="width: 227px;height: 150px;border-right: 1px solid #444853;float: left;">
                <h5 style="width: 227px;margin-left: 55px;font-size: 15px;height: 30px;color: #acb1bb;"> <span
                        class="iconfont" style=" width: 227px; font-size: 20px;text-align: center;">&#xe6c5;</span> 支付方式
                </h5>
                <h4 style="width: 227px;height: 25px;font-size: 12px;margin-left: 80px;color: #acb1bb;">支付方式</h4>
                <h4 style="width: 227px;height: 25px;font-size: 12px;margin-left: 80px;color: #acb1bb;">购物点支付</h4>
                <h4 style="width: 227px;height: 25px;font-size: 12px;margin-left: 80px;color: #acb1bb;">如何充值</h4>

            </div>
            <div style="width: 227px;height: 150px;border-right: 1px solid #444853;float: left;">
                <h5 style="width: 227px;margin-left: 55px;font-size: 15px;height: 30px;color: #acb1bb;"> <span
                        class="iconfont" style=" width: 227px; font-size: 20px;text-align: center;">&#xe6c5;</span>
                    腾讯在线服务</h5>
                <h4 style="width: 227px;height: 25px;font-size: 12px;margin-left: 80px;color: #acb1bb;">腾讯官方在线客服</h4>
                <img src="../dist/images/gongshang.png" alt=""
                    style="width: 119px;height: 49px;display: block;margin: 10px auto;">
            </div>
            <div style="float: left;">
                <div style="width: 240px;height: 135px;margin: 0 auto;">
                    <div style="width: 100px; height: 135px;float: left; ">
                        <img src="../dist/images/iii1.png" alt="" style="width: 100px;">
                        <h5
                            style="width: 100px ;height: 12px;margin-top: 20px; color: #a4abb4;font-size: 12px;text-align: center;">
                            掌上道聚城</h5>
                    </div>
                    <div style="width: 100px; height: 135px;float: right;">
                        <img src="../dist/images/iiii2.png" alt="" style="width: 100px;">
                        <h5
                            style="width: 100px ;height: 12px;margin-top: 20px;color: #a4abb4;font-size: 12px;text-align: center;">
                            道聚城公众号</h5>
                    </div>
                </div>

            </div>

        </div>

        <div style="margin: 0 auto;width:1250px ;height: 145px;border-top: 1px solid #444853;">
            <span
                style="display: block;width: 1000px;margin: 0 auto;text-align: center;color: #81858f;font-size: 12px;margin-top: 40px;">腾讯互动娱乐
                | 服务条款| 腾讯游戏隐私保护指引| 腾讯游戏儿童隐私保护指引| 广告服务 | 腾讯游戏招聘 | 腾讯游戏客服 | 游戏地图 | 成长守护平台 | 商务合作 | 网站导航</span>
            <span
                style="display: block;width: 1000px;margin: 0 auto;text-align: center;color: #81858f;font-size: 12px;">COPYRIGHT
                © 1998 – 2020 TENCENT. ALL RIGHTS RESERVED.</span>
            <span
                style="display: block;width: 1000px;margin: 0 auto;text-align: center;color: #81858f;font-size: 12px;">腾讯公司
                版权所有</span>
        </div>
    </div>


</body>
<script src="./libs/require.js" data-main="./js/indexMain"></script>
<script>
    // console.log( $(".jrgwc"));
    $(".xqq").on("mousedown", ".jrgwc", function () {
        $(this).css("color", "red")
        // console.log("88");
    });
    $(".xqq").on("mouseup", ".jrgwc", function () {
        $(this).css("color", "#fff")
        // console.log("88");
    });


    //     $(".btnzc").mousedown(function(){
    //     $(".btnzc").css("color","red")

    // });
    // $(".btnzc").mouseup(function(){
    //     $(".btnzc").css("color","#fff")

    // })
    $(".qudl").click(function () {
        localStorage.setItem("dl", "1")
    })
    //  首页的登录守卫
    if (localStorage.getItem("token") === "ok") {
        $("#headdr1").css("display", "none");

        $("#headdr2").css("display", "block")
            .children("span").html("欢迎" + localStorage.getItem("un"));
        // console.log("66");
    }

    // 退出功能
    $(".tcgn").click(function () {
        localStorage.setItem("token", "");
        $("#headdr1").css("display", "block");

        $("#headdr2").css("display", "none");
    })
</script>

</html>